<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>登录页面 -Zero后台管理系统模板</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
    <meta name="author" content="yinqi">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <style>
        .lyear-wrapper {
            position: relative;
        }

        .lyear-login {
            display: flex !important;
            min-height: 100vh;
            align-items: center !important;
            justify-content: center !important;
        }

            .lyear-login:after {
                content: '';
                min-height: inherit;
                font-size: 0;
            }

        .login-center {
            background-color: rgba(255,255,255,.075);
            min-width: 29.25rem;
            padding: 2.14286em 3.57143em;
            border-radius: 3px;
            margin: 2.85714em;
        }

        .login-header {
            margin-bottom: 1.5rem !important;
        }

        .login-center .has-feedback.feedback-left .form-control {
            padding-left: 38px;
            padding-right: 12px;
            background-color: rgba(255,255,255,.075);
            border-color: rgba(255,255,255,.075)
        }

        .login-center .has-feedback.feedback-left .form-control-feedback {
            left: 0;
            right: auto;
            width: 38px;
            height: 38px;
            line-height: 38px;
            z-index: 4;
            color: #dcdcdc;
        }

        .login-center .has-feedback.feedback-left.row .form-control-feedback {
            left: 15px;
        }

        .login-center .form-control::-webkit-input-placeholder {
            color: rgba(255, 255, 255, .8);
        }

        .login-center .form-control:-moz-placeholder {
            color: rgba(255, 255, 255, .8);
        }

        .login-center .form-control::-moz-placeholder {
            color: rgba(255, 255, 255, .8);
        }

        .login-center .form-control:-ms-input-placeholder {
            color: rgba(255, 255, 255, .8);
        }

        .login-center .custom-control-label::before {
            background: rgba(0, 0, 0, 0.3);
            border-color: rgba(0, 0, 0, 0.1);
        }

        .login-center .lyear-checkbox span::before {
            border-color: rgba(255,255,255,.075)
        }
        .red {
            color: #fcc525;
            padding:3px 0;
        }
    </style>
</head>

<body>
    <div id="loginbox" class="row lyear-wrapper" style="background-image: url(images/login-bg-3.jpg); background-size: cover;">
        <div class="lyear-login">
            <div class="login-center">
                <div class="login-header text-center">
                    <a href="index.html"> <img alt="light year admin" src="images/logo-sidebar.png"> </a>
                </div>
                <form @submit.prevent="login">
                    <div class=" red">{{message}}</div>
                    <div class="form-group has-feedback feedback-left">
                        <input type="text" placeholder="请输入您的用户名" class="form-control" v-model="userName" required>
                        <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
                    </div>
                    <div class="form-group has-feedback feedback-left">
                        <input type="password" placeholder="请输入密码" class="form-control" v-model="password" required>
                        <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
                    </div>
                    <div class="form-group has-feedback feedback-left row" style="min-width:300px">
                        <div class="col-xs-7">
                            <!--<input type="text" v-model="verifyCode" class="form-control" placeholder="验证码" required>
                            <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>-->
                        </div>
                        <div class="col-xs-5">
                            <!--<img :src="verifyCodeSrc.Src" @click="refreshVerifyCode" class="pull-right" style="cursor: pointer;" title="点击刷新" alt="captcha">-->
                        </div>
                    </div>
                    <div class="form-group">
                        <button @click="login" class="btn btn-block btn-primary" type="button">立即登录</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/tools.js"></script>
    <script src="js/crypto/core.js"></script>
    <script src="js/crypto/md5.js"></script>
    <script>
        var vueObj = new Vue({
            el: '#loginbox',
            data: {
                userName: '',
                password: '',
                verifyCode: '',
                verifyCodeSrc: {}, 
                rememberMe: false,
                message: "初始账号admin密码为123456"
            },
            mounted() {
                this.refreshVerifyCode();
            },
            methods: {
                refreshVerifyCode: function () {
                    axios.get('/Public/InitApi_VerifyCode')
                        .then(response => {
                            this.verifyCodeSrc = response.data;
                        })
                        .catch(error => {
                            console.error(error);
                        });
                },
                login: function () {
                    var th = this;
                    if (!this.userName || !this.password) {
                        this.message = "用户名或者密码不能为空";
                    }
                    //else if (this.verifyCodeSrc.Code != CryptoJS.MD5(this.verifyCode.toLowerCase()).toString())
                    //{
                    //    this.message = "验证码错误";
                    //}
                    else {
                        axios.post("/api/rezero/token", { userName: this.userName, password: CryptoJS.MD5(this.password + "").toString() })
                            .then(response => {
                                this.error = null;
                                this.result = response.data;
                                if (response.data.message) {
                                    th.message = response.data.message;
                                } else {
                                    localStorage["@@authorizationLocalStorageName"] = response.data;
                                    setTimeout(function () {
                                        window.location.href = "/rezero";
                                    }, 50);
                                }
                            })
                            .catch(error => {
                                this.error = error.message;
                                this.data = null;
                            });
                    }
                },
            }
        });
    </script>
</body>
</html>










